<template>
    <BPTable ref='tableRef' align='center' row-key='id' name-key='code' :columns='columns' :api='page' :buttons='buttons'>

    </BPTable>

    <BDrawer v-model:visible='visible' :title='dialogTitle' width='600px' :confirm='submit'>
        <!-- <BForm ref='formRef' :label-col='{span : 5}' :fields='formFields'></BForm> -->
        <Edit :row="currentRow" ref="formRef" />
    </BDrawer>

</template>

<script lang='ts' setup>
    import { pageApi, deleteApi, saveApi } from '@/api/system/Lang'
    import { useI18nStore } from '@/store/i18n'
import { generateCodeFromUid } from '@/utils'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'
    import Edit from './Edit.vue'

    const visible = ref(false)


    const currentRow = ref<any>()

    const tableRef = ref()
    const formRef = ref()
    const dialogTitle = ref()
    const i18n = useI18nStore()

    

    const buttons = ref<SearchButton[]>([
        {
            button : 'add',
            func : () => {
                currentRow.value = null
                dialogTitle.value = '新增'
                visible.value = true
            }
        }
    ])

    async function page(params:any) {
        const res = await pageApi(params)
        if(res.success && res.data && res.data.rows) {
            res.data.rows.forEach(row => {
                i18n.locales.forEach((item, index) => {
                    row['$' + item.code] = row.texts[item.code]
                })
            })
        }

        return res
    }

    
    async function submit() {
        const res = await formRef.value.submit()
        if(res.success) {
            tableRef.value.reload()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }

    const columns = ref<Column[]>([
        {
            title : i18n.t('code'),
            dataIndex : 'code',
            align : 'center',
            inSearch : true,
        },

        {
            title : '操作',
            dataIndex : '$action',
            align : 'center',
            $edit(row) {
                dialogTitle.value = i18n.t('edit')
                currentRow.value = {
                    id : row.id,
                    code : row.code,
                    texts : row.texts
                }
                visible.value = true
            },

            async $delete(row) {
                const res = await deleteApi(row.id)
                if(res.success) {
                    await i18n.init()
                    message.success(i18n.t('deleteSuccess'))
                    tableRef.value.load()
                }else {
                    message.error(res.msg)
                }
            }
        }
    ])

    let spliceIndex = 1

    i18n.locales.forEach((item, index) => {
        columns.value.splice(spliceIndex, 0, {
            title : item.name,
            dataIndex : '$' + item.code,
            align : 'center',
        })

        spliceIndex ++
    })
</script>

<style lang='scss' module>
    .username{
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
</style>